<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/dashboard' }">控制台</el-breadcrumb-item>
            <el-breadcrumb-item>操作员管理</el-breadcrumb-item>
        </el-breadcrumb>
        <hr>

        <el-card style="font-size: 20px;font-family: 'Helvetica Nee',serif">
            <b>操作员管理</b>
            <p style="font-size: 15px">一个管理员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</p>
        </el-card>
        <el-card class="box-card">
            <div class="card-header">
                <el-row>
                    <el-col :span="21">
                        <Button type="success" icon="md-add">添加</Button>
                    </el-col>
                    <el-col :span="3">
                        <Input search enter-button placeholder="请输入搜索的内容" @on-search="search()"/>
                    </el-col>
                </el-row>
            </div>

            <el-table :border="true" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed prop="id" label="ID" width="60"></el-table-column>
                <el-table-column prop="thumUrl" label="用户名" width="80"></el-table-column>
                <el-table-column prop="code" label="超级管理员" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="name" label="所属组别" width="200"></el-table-column>
                <el-table-column prop="address" label="Email" width="250"></el-table-column>
                <el-table-column label="状态" width="200" align="center">
                    <el-switch v-model="value0" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch> 正常
                </el-table-column>
                <el-table-column prop="area" label="最近登录" width="150"></el-table-column>
                <el-table-column align="center" label="操作" width="120" fixed="right">
                    <template>
                        <ButtonGroup>
                            <Button type="info" icon="md-create"></Button>
                            <Button type="error" icon="md-trash"></Button>
                        </ButtonGroup>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 以下是弹出的修改房产管理的对话框 -->
            <el-dialog title="编辑" :visible.sync="dialogFormVisible">
                <el-form :model="editForm">
                    <el-form-item label="所属组别" :label-width="formLabelWidth">
                        <el-select v-model="value" placeholder="请选择" border style="width: 98%">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属小区" :label-width="formLabelWidth">
                        <el-select v-model="value" placeholder="请选择" border style="width: 98%">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="editForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="Email" :label-width="formLabelWidth">
                        <el-input v-model="editForm.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="editForm.area" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="editForm.developer" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <template>
                            <el-radio v-model="radio" label="1">正常</el-radio>
                            <el-radio v-model="radio" label="2">隐藏</el-radio>
                        </template>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitEditForm()">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">关 闭</el-button>
                </div>
            </el-dialog>

            <!-- 以下是弹出的添加房产管理的对话框 -->
            <el-dialog title="添加" :visible.sync="dialogFormVisible1">
                <el-form :model="editForm1">
                    <el-form-item label="所属组别" :label-width="formLabelWidth">
                        <el-select v-model="value" placeholder="请选择" border style="width: 98%">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属小区" :label-width="formLabelWidth">
                        <el-select v-model="value" placeholder="请选择" border style="width: 98%">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="editForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="Email" :label-width="formLabelWidth">
                        <el-input v-model="editForm.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="editForm.area" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="editForm.developer" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <template>
                            <el-radio v-model="radio" label="1">正常</el-radio>
                            <el-radio v-model="radio" label="2">隐藏</el-radio>
                        </template>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitEditForm()">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">关 闭</el-button>
                </div>
            </el-dialog>


            <div class="block">
                <Page :total="40" show-elevator show-sizer />
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "index",
        data() {
            return {
                searchText: "",
                option: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }],
                tableData: [{
                    id: "1",
                    thumUrl: '图片',
                    code: 'CM2017110200002',
                    name: '重庆xxx小区',
                    address: '重庆市两江新区xx街道',
                    area: '3109000.00',
                    buildings: '75',
                    households: '65031',
                    greeningRate: '40.00',
                    developer: '帝瓦雷后方可哇好看大大',
                    estate: 'xxxx物业管理公司',
                    gmtCreate: '2016-05-07',
                }],
                dialogFormVisible: true,
                dialogFormVisible1: true,
                editForm: {
                    name: '',
                    address: '',
                    area: '',
                    developer: '',
                    estate: '',
                    greeningRate: '',
                    buildings: '',
                    households: ''
                },
                editForm1: {
                    name: '',
                    address: '',
                    area: '',
                    developer: '',
                    estate: '',
                    greeningRate: '',
                    buildings: '',
                    households: ''
                },
                formLabelWidth: '150px',
                radio: '1',
                value0: true,
                value: '',
                value1: ''
            }
        },
        methods: {
            search() {

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            goBack() {
                console.log('go back');
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style scoped>
    .card-header {
        margin-bottom: 20px;
    }

    .block {
        text-align: center;
        margin-top: 10px;
    }

    .el-select {
        margin-left: 15px;
        margin-right: 30px;
    }

    .el-date-picker {
        margin-left: 50px;
    }
</style>
